<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='File Management',active='attach'">
<header th:replace="admin/fragments/header::headerFragment(${title},${active})"></header>
<link href="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet" />
<style>
    #dropzone {
        margin-bottom: 3rem;
    }

    .dropzone {
        border: 2px dashed #0087F7;
        border-radius: 5px;
        background: white;
    }

    .dropzone .dz-message {
        font-weight: 400;
    }

    .dropzone .dz-message .note {
        font-size: 0.8em;
        font-weight: 200;
        display: block;
        margin-top: 1.4rem;
    }

    .attach-img {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        box-shadow: 0px 0px 8px #333;
    }

    .attach-text {
        font-size: 12px;
        font-weight: 300;
    }

    .attach-img:hover {
        background-color: #f9f9f9;
    }
</style>

<body class="fixed-left">
    <div id="wrapper">
        <div th:replace="admin/fragments/header::header-body"></div>
        <div class="content-page">
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class="page-title">File Management</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-12 portlets">
                                <div class="m-b-30">
                                    <form action="/admin/attach/upload" class="dropzone" id="dropzone">
                                        <div class="fallback">
                                            <input name="file" type="file" multiple="multiple" />
                                        </div>
                                        <div class="dz-message">
                                            Drag File Here to Upload.
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 attach">
                            <th:block th:if="${commons.is_empty(attachs)}">
                                <div class="row">
                                    <div class="col-md-4 text-center">
                                        <div class="alert alert-warning">
                                            Nothing Uploaded yet! Have a try!
                                        </div>
                                    </div>
                                </div>
                            </th:block>
                            <th:block th:unless="${commons.is_empty(attachs)}">
                                <th:block th:each="attach : ${attachs.list}">
                                    <div class="col-md-2 text-center m-t-10">
                                        <a th:href="'http://pb84kab39.bkt.clouddn.com/' + ${attach.fkey}"
                                            target="_blank">
                                            <img class="attach-img"
                                                th:src="@{${attach.ftype == 'image'}?'http://pb84kab39.bkt.clouddn.com/' +${attach.fkey}: '/admin/images/attach.png'}"
                                                th:title="${attach.fname}" />
                                        </a>
                                        <div class="clearfix m-t-10">
                                            <span class="attach-text" data-toggle="tooltip" data-placement="top"
                                                th:attr="data-original-title=${attach.fname}"
                                                th:text="${commons.substr(attach.fname, 12)}">
                                            </span>
                                        </div>
                                        <div class="clearfix">
                                            <button th:attr="url='http://pb84kab39.bkt.clouddn.com/'+${attach.fkey}"
                                                type="button"
                                                class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                                                <i class="fa fa-copy"></i> <span>Copy</span>
                                            </button>
                                            <button type="button"
                                                class="btn btn-danger btn-sm waves-effect waves-light m-t-5"
                                                th:onclick="'delAttach('+${attach.id}+');'">
                                                <i class="fa fa-trash-o"></i> <span>Delete</span>
                                            </button>
                                        </div>
                                    </div>
                                </th:block>
                                <div th:replace="comm/macros :: pageAdminNav(${attachs})"></div>
                            </th:block>
                        </div>
                    </div>
                    <div th:replace="admin/fragments/footer :: footer-content"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/fragments/footer :: footer"></div>
    <script src="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.js"></script>
    <script src="//cdn.bootcss.com/clipboard.js/1.6.0/clipboard.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var tale = new $.tale();

        $("div#dropzone").dropzone({
            paramName: "file",
            url: "/admin/attach/upload",
            maxFilesize: 10,
            init: function () {
                this.on("success", function (file, msg) {
                    if (msg.code !== 'success') {
                        tale.alertError(msg.msg);
                    }
                    setTimeout(function () {
                        window.location.reload();
                    }, 200);
                });
            }
        });
        var clipboard = new Clipboard('button.copy', {
            text: function (trigger) {
                return $(trigger).attr('url');
            }
        });

        clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            e.clearSelection();
        });

        function delAttach(id) {
            tale.alertConfirm({
                title: 'Are you sure to delete this attachment?',
                then: function () {
                    tale.post({
                        url: '/admin/attach/delete',
                        data: { id: id },
                        success: function (result) {
                            if (result && result.code == 'success') {
                                tale.alertOkAndReload('Attachment deleted successfully!');
                            } else {
                                tale.alertError(result.msg || 'Attachment deletion failed!');
                            }
                        }
                    });
                }
            });
        }
    /*]]>*/
    </script>
</body>

</html>